<template>
  <div class="cPage">
    <el-collapse accordion :value="0">
      <el-collapse-item
        v-for="(item, index) in pageIndexConfig"
        :key="index"
        :name="index"
      >
        <template slot="title">
          <div class="cardTop">
            <span class="text">{{ item.name }}</span>
            <el-button
              class="btn"
              @click.stop="createEditNewAd(item)"
              type="primary"
              >添加</el-button
            >
          </div>
        </template>
        <div class="content">
          <el-table :data="tableData[item.resType]" border style="width: 100%">
            <template v-if="item.isPosition">
              <el-table-column prop="postion" label="侧边栏推荐位置">
                <template slot-scope="scope">
                  {{
                    $utils.findValueInObj(positionStatus, scope.row.position)
                  }}
                </template>
              </el-table-column>
            </template>
            <el-table-column prop="name" label="标题"> </el-table-column>
            <template v-if="item.resType !== 'TAG'">
              <el-table-column label="图片" align="center">
                <template slot-scope="scope">
                  <a :href="scope.row.linkUrl" target="_blank"
                    ><img class="inlineImg" :src="scope.row.coverUrl" alt=""
                  /></a>
                </template>
              </el-table-column>
            </template>
            <el-table-column prop="weight" label="权重" width="100">
            </el-table-column>
            <el-table-column label="可用状态" width="100">
              <template slot-scope="scope">
                <span>
                  <el-tag :type="scope.row.status ? 'success' : 'info'">{{
                    adStatus[scope.row.status]
                  }}</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                <!-- <el-button
                  @click="createEditNewAd(scope.row, true, item)"
                  type="text"
                  size="small"
                >
                  编辑
                </el-button> -->
                <!-- <el-button
                  @click="handleCurrentStatus(scope.row)"
                  type="text"
                  size="small"
                >
                  {{ scope.row.status ? "下架" : "上架" }}
                </el-button> -->
                <el-button
                  @click="deleteCurrentRow(scope.row)"
                  type="text"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      :title="`${isEdit ? '编辑' : '新建'}侧边栏推荐`"
      :visible.sync="editModalVisible"
      size="mini"
      width="600"
      style="padding: 4px 20px"
    >
      <articleSelect
        v-if="editModalVisible"
        :tabs="[form.resType]"
        :selectUUID="resId"
        :selectArticle="selectArticle"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="editModalVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { adStatus, positionStatus } from "@/config/ad";
import { getUploadToken, uploadUrl } from "@/util/upload";
import rules from "@/config/rules";
import articleSelect from "../../components/articleSelect";
export default {
  props: ["pageIndexConfig"],
  components: { articleSelect },
  data() {
    return {
      resId: "",
      openSelectArticle: false,
      pageIndex: {},
      loading: false,
      picTip: "",
      tableData: {
        TOP: [],
        LB_BANNER: [],
        SMALL_BANNER: [],
      },
      // 上传相关
      uploadUrl,
      // 表单相关
      editModalVisible: false,
      isEdit: false,
      form: {},
      rules,
      adStatus,
      positionStatus,
    };
  },
  methods: {
    selectArticle(item) {
      this.resId = item.uuid;
    },
    createEditNewAd(config) {
      this.form = config
      this.editModalVisible = true;
    },
    handleCurrentStatus(config) {
      this.$confirm(
        `是否确认 ${config.status ? "下架" : "上架"} 侧边栏推荐 [${
          config.name
        }]?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$axios
          .put(
            `/api/adverts/${config.uuid}.json?_method=put`,
            { status: Number(!config.status) }
          )
          .then((response) => {
            this.$message.success("操作成功");
            this.getAdList(config);
          });
      });
    },
    deleteCurrentRow(config) {
      this.$confirm(`是否确认删除[${config.name}]侧边栏推荐?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .delete(
            `/api/side/module/recommends/${config.uuid}.json?_method=delete`
          )
          .then((response) => {
            this.$message.success("操作成功");
            this.getAdList(config);
          });
      });
    },
    getAdList(config) {
      const { moduleId, resType } = config;
      const params = {
        moduleId,
        status: 1,
        handled: 1,
        resType,
      };
      const _this = this;
      this.$axios
        .get("/api/side/module/recommends.json", { params })
        .then((response) => {
          const tableData = JSON.parse(JSON.stringify(this.tableData));
          tableData[resType] = response.list;
          _this.tableData = tableData;
        });
    },
    handleSubmit() {
      const { form, resId } = this;
      const ajaxType = "post";
      const url = "/api/side/module/recommends.json"
      const params = {
        resId,
        moduleId: form.moduleId,
        resType: form.resType,
        status: 1,
        weight: 1,
      };
      this.$axios[ajaxType](url, params).then((response) => {
        this.$message.success("操作成功");
        this.getAdList(this.form);
        this.editModalVisible = false;
      });
    },
    handleAvatarSuccess(res, file) {
      const fileObj = this.$utils.judgeLogin(res);
      this.form.coverUrl = fileObj.url;
    },
  },
  created() {
    this.pageIndexConfig.forEach((item) => {
      this.getAdList(item);
    });
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
.addLinkBtn {
  margin-top: 10px;
}
.el-collapse {
  border-top: none;
}
.el-dialog__body {
  padding: 4px 20px;
}
</style>
